<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof JSliderNews 1.0 - Jquery 1.3</title>
<link rel="stylesheet" type="text/css" href="css/layer.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
    $(document).ready( function(){
        var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
			next:$('#lofslidecontent45 .lof-next') };
	$obj = $('#lofslidecontent45').lofJSidernews( {
            interval    : 5000,
            direction	: 'opacitys',
            easing	: 'easeInOutQuad',
            duration	: 1200,
            auto	: true,
            maxItemDisplay  : 4,
            navPosition     : 'horizontal', // horizontal
            navigatorHeight : 32,
            navigatorWidth  : 80,
            mainWidth   :980,
            buttons	: buttons
        });
    });
</script>
</head>
<body>
    <div id="container">
        <h1><strong>Lof JSliderNews 1.0</strong> -  Jquery 1.3 & Easing plugin</h1>
        <p>
            <strong> Direction: Right - Left. The Navigator is the list of thumbnails.</strong>
            The plugin allow to use the wheelup and wheeldown to previous|next item in the list
        </p>
        <!------------------------------------- THE CONTENT ------------------------------------------------->
        <div id="lofslidecontent45" class="lof-slidecontent" style="width:720px; height:340px;">
            <div class="preload"><div></div></div>
            <!-- MAIN CONTENT -->
            <div class="lof-main-outer" style="width:720px; height:340px;">
                <ul class="lof-main-wapper">
  		<li>
                    <img alt=""  src="images/mot.png" title="Newsflash 2" />
                    <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></h3>
			<h2>Content of Newsflash 1</h2>
                        <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="images/hai.png" title="Newsflash 1" />
                    <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> <i> — Monday, February 15, 2010 12:42</i></h3>
                        <h2>Content of Newsflash 2</h2>
                        <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="images/ba.png" title="Newsflash 3" />
                    <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> <i> — Monday, February 15, 2010 12:42</i></h3>
                        <h2>Content of Newsflash 3</h2>
                        <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="images/bon.png" title="Newsflash 5" />
                    <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a><i> — Monday, February 15, 2010 12:42</i></h3>
                        <h2>Content of Newsflash 4</h2>
                        <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="images/nam.png" title="Newsflash 5" />
                    <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a><i> — Monday, February 15, 2010 12:42</i></h3>
                        <h2>Content of Newsflash 5</h2>
                        <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="images/sau.png" title="Newsflash 5" />
                    <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a><i> — Monday, February 15, 2010 12:42</i></h3>
                        <h2>Content of Newsflash 6</h2>
                        <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                     </div>
                </li>
                <li>
                <img src="images/bay.png" title="Newsflash 5" />
                     <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a><i> — Monday, February 15, 2010 12:42</i></h3>
                        <h2>Content of Newsflash 7</h2>
                        <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                     </div>
                </li>
                <li>
                     <img src="images/tam.png" title="Newsflash 8" />
                     <div class="lof-main-item-desc">
                        <h3><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a><i> — Monday, February 15, 2010 12:42</i></h3>
                        <h2>Content of Newsflash 8</h2>
                        <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                        </p>
                     </div>
                </li>
                </ul>
            </div>
            <!-- END MAIN CONTENT -->
            <!-- NAVIGATOR -->
            <div class="lof-navigator-wapper">
                <div onclick="return false" href="" class="lof-next">Next</div>
                <div class="lof-navigator-outer">
                    <ul class="lof-navigator">
                       <li><img src="images/mot_1.png" /></li>
                       <li><img src="images/hai_1.png" /></li>
                       <li><img src="images/ba_1.png" /></li>
                       <li><img src="images/bon_1.png" /></li>
                       <li><img src="images/nam_1.png" /></li>
                       <li><img src="images/sau_1.png" /></li>
                       <li><img src="images/bay_1.png" /></li>
                       <li><img src="images/tam_1.png" /></li>
                    </ul>
                </div>
                <div onclick="return false" href="" class="lof-previous">Previous</div>
            </div>
            <!----------------- --------------------->
        </div>
    </div>
</body>
</html>
